<template>
  <footer class="footer wow fadeInUp" id="contact">
        <div class="footer-top">
            <div class="container">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
                        <div class="single-widget about">
                            <div class="footer-logo">
                                <h2>小贺也要加油啊！</h2>
                            </div>
                            <p>愿你每天快乐</p>
                            <div class="button">
                                <a href="#" class="btn layui-btn layui-btn-normal">About Me</a>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
                        <div class="single-widget">
                            <h2>相关链接</h2>
                            <ul class="social-icon">
                                <li class="active"><a href="#"><i class="fa fa-book"></i>敬请期待</a></li>
                                <li class="active"><a href="#"><i class="fa fa-comments"></i>敬请期待</a></li>
                                <li class="active"><a href="#"><i class="fa fa-share"></i>敬请期待</a></li>
                                <li class="active"><a href="#"><i class="fa fa-snowflake-o"></i>敬请期待</a></li>
                                <li class="active"><a href="#"><i class="fa fa-files-o"></i>敬请期待</a></li>
                            </ul>                   
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
                        <div class="single-widget contact">
                            <h2>联系我</h2>
                            <ul class="list social-icon">
                                <li class="active"><a href="#"><i class="fa fa-qq"></i>466116242</a></li>
                                <li class="active"><a href="#"><i class="fa fa-weixin"></i>LH586543</a></li>
                                <li class="active"><a href="#"><i class="fa fa-envelope"></i>466116242@qq.com</a></li>
                                <!-- <li><i class="fa fa-git fa-lg"></i>gitee：<a href="https://gitee.com/li-chengh"> https://gitee.com/li-chengh</a></li>
                                <li><i class="fa fa-github fa-lg"></i>github：<a href="https://github.com/a586543"> https://github.com/a586543</a></li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright">
            <div class="container">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 text-center">
                        <a href="https://beian.miit.gov.cn/" target="_blank">Powered by 小贺也要加油啊 豫ICP备20003986号</a>
                    </div>
                </div>
            </div>
        </div>  
    </footer>
</template>
<script>
export default {
  name: "Footab",
  data() {
    return {
    };
  },
};
</script>
<style scoped>
.footer{
    position: relative;
    z-index: 2;
}
.footer .container {
    width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    line-height: 24px;
    font-size: 14px;
}

.footer .footer-top {
    background: #232328;
    padding: 60px 0
}


.footer .footer-logo {
    margin-bottom: 20px
}

.footer .single-widget h2 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 20px;
    text-transform: uppercase
}

.footer .about p {
    color: #eee
}

.footer .button .btn {
    margin-top: 20px
}

.footer .button .btn:hover {
    border-color: #fff
}

.footer .contact ul li {
    color: #eee;
    position: relative;
    padding-left: 32px;
    margin-bottom: 10px
}

.footer .contact ul li:last-child {
    margin: 0
}

.footer .contact ul li i {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    left: 0;
    margin-top: -15px;
    font-size: 14px
}

.footer .contact ul li a {
    color: #fff
}

.footer .social-icon li {
    float: left;
    width: 50%;
    margin-bottom: 10px
}

.footer .social-icon li:last-child {
    margin: 0
}

.footer .social-icon li a {
    color: #eee
}

.footer .social-icon li a:hover {
    color: #1e9fff
}

.footer .social-icon li a i {
    margin-right: 10px;
    width: 20px;
    font-size: 14px
}

.footer .copyright {
    padding: 12px 0;
    background: #1D1D21
}

.footer .copyright .text-center {
    text-align: center
}

.footer .copyright a {
    color: #bbb;
    font-size: 14px
}
</style>